<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器权重</title>
		<!-- 选择器权重越高，选中几率越大 -->
		<style>
			*{/*权值0  很容易被覆盖*/
			color: #55ff7f;
			background: #aa00ff;	
			}
			div{
				/*权值1  */
				color: #ffff00;
				background: #ff0000;
			}
			.d1{/*权值10*/
				color: #999;
				background: #555;
			}
			div.d1{/*选择器权值之和  权值1+10 11*/
				color: #999;
				background: #55aa00;
			}
			body div.d1{/* 权值12*/
				font-size: 15px;
			}
			#d1{/* 权值100*/
				
				color: #999;
				background: #555;
			}
			div#d1{/*权值101*/
				
			}
			div#d1:hover{
				
			}
		</style>
	</head>
	<body>
		<div class="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus aperiam explicabo cumque alias nihil ullam reprehenderit iste consequuntur ab, in illo repudiandae veritatis cum id odit numquam quam culpa. Optio.</div>
	</body>
</html>